<template>
	<view class="order-item" v-for="(order, index) in props.orders" :key="index" style="margin-bottom: 30rpx">
		<list-cell :hover="false">
			<view class="w-100 d-flex align-items-center">
				<view class="flex-fill d-flex flex-column">
					<view class="font-size-lg text-color-base" style="margin-bottom: 20rpx" v-show="state.role == ROLE_USER">
						{{ order.store.name }}
					</view>
					<view class="font-size-sm text-color-assist">订单编号：{{ order.inner_trade_no }}</view>
				</view>
				<view class="font-size-lg text-color-primary">
					{{ getOrderStatus(order.status) }}
				</view>
			</view>
		</list-cell>
		<list-cell :hover="false">
			<view class="w-100 d-flex align-items-center">
				<view class="d-flex flex-column w-60">
					<view class="w-100 d-flex align-items-center overflow-hidden">
						<view class="font-size-sm text-color-assis">收货地址:{{ order.location }}</view>
					</view>
				</view>
				<view class="d-flex justify-content-end align-items-center w-40" v-show="state.role == ROLE_MER">
					<image src="/static/images/order/mobile.png" style="width: 60rpx; height: 60rpx; margin-right: 30rpx"></image>
					<image src="/static/images/order/navigation.png" style="width: 60rpx; height: 60rpx"></image>
				</view>
			</view>
		</list-cell>

		<list-cell :hover="false" last>
			<view class="w-100 d-flex flex-column">
				<view class="w-100 text-truncate font-size-lg text-color-base" style="margin-bottom: 20rpx">
					<uni-collapse>
						<uni-collapse-item :title="orderGoodsName(order.goods_info)">
							<view class="content">
								<text class="text">
									{{ orderGoodsName(order.goods_info) }}
								</text>
							</view>
						</uni-collapse-item>
					</uni-collapse>
				</view>
				<view class="d-flex justify-content-between align-items-center" style="margin-bottom: 30rpx">
					<view class="font-size-sm text-color-assis">备注:{{ order.des }}</view>
				</view>
				<view class="d-flex justify-content-between align-items-center" style="margin-bottom: 30rpx">
					<view class="font-size-sm text-color-assist">
						{{ order.creat_at }}
					</view>
					<view class="d-flex font-size-sm text-color-base align-items-center">
						<view style="margin-right: 10rpx">共{{ order.total }}件商品，实付</view>
						<view class="font-size-lg">￥{{ order.amount }}</view>
					</view>
				</view>
				<view class="d-flex align-items-center justify-content-end" v-show="state.role == ROLE_MER">
					<view style="margin-right: 10rpx">
						<button type="primary" size="mini" v-show="order.status == ORDER_SUCCESS">开始送货</button>
						<button type="primary" size="mini" v-show="order.status == ORDER_DELIVERY">送货完成</button>
					</view>
				</view>
			</view>
		</list-cell>
	</view>
</template>

<script setup lang="ts">
import listCell from '../components/list-cell/list-cell';

import { GoodsInfo, Order, getOrderStatus } from '../../vendor/order_food/order';
import { state, ROLE_MER, ROLE_USER } from '../../store/user';
import { ORDER_DELIVERY, ORDER_SUCCESS } from '../../store/shop';

const props = defineProps({
	orders: {
		type: Array<Order>,
		required: true
	}
});

const orderGoodsName = (goods: Array<GoodsInfo>) => {
	let arr = [];
	goods.forEach((good) => arr.push(good.title + '*' + good.amount));
	return arr.join('，');
};
 
 const updateOrder= (item:Order,status)=>{
	 updateStatus(item.inner_trade_no,status,()=>{
		 item.status = status
	 })
 }
 
</script>

<style lang="scss" scoped>
// @import url('/styles/order_food.scss');
@import '@/styles/order_food.scss';
</style>
